<template>
  <el-row>
    <h1>Nodejs-json生成SQL-Model</h1>
    <el-col :span="10">
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 31, maxRows: 31}" placeholder="请输入接口Json"
                 v-model="inputTextarea">
      </el-input>
    </el-col>
    <el-col :span="5" class="createBtn">
      <el-button type="primary" v-on:click="getModelContent">转化</el-button>
    </el-col>
    <el-col :span="10" >
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 15, maxRows: 15}"  placeholder="输出SequelizeSQL"
                 v-model="outputTextareaS" class="outputTextareaH">
      </el-input>

      <el-input  type="textarea" resize="none" :autosize="{ minRows: 15, maxRows: 15}" placeholder="输出SequelizeModel"
                 v-model="outputTextareaM" >
      </el-input>
    </el-col>
  </el-row>

</template>

<script>
  import { getApplinziINodeSQL  } from '../../api/httpApi'

  export default {
    name: "nodeSQLModel",
    data() {
      return {
        inputTextarea: '',
        outputTextareaS: '',
        outputTextareaM: '',
      }
    },
    created() {
      // 初始化
      console.log("created");

    },
    mounted() {
      // 延迟方法
      console.log("mounted");
      //this.getModelContent()
    },
    beforeUpdate() {
      // 事件变化前
      console.log("beforeUpdate");
    },
    updated() {
      // 事件变化
      console.log("updated");
    },
    beforeDestory() {
      // 销毁
      console.log("beforeDestory");
    },
    methods: {
      changeRadioVual(){
        this.outputTextareaP = ""
        this.outputTextareaM = ""
        this.outputTextareaC = ""
      },
      // 方法
      getModelContent() {

        var data = {
          curl: this.inputTextarea ,
          radio: this.radio
        }
        getApplinziINodeSQL(data).then((res)=>{
          var rt = res.data;
          if (rt.code === 0){
            var data = rt.data
            console.log(data);
            this.outputTextareaM = data.model
            this.outputTextareaS = data.sql
          }
        })

      }
    }
  }
</script>

<style scoped>
  .createBtn{
    width: 16%;
    align-content: center;
    text-align: center;
    margin-top: 320px;

  }
  h1{
    text-align: center;
    color: #333333;
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .radioView{
    display: block;
    height: 30px;
    text-align: center;
  }
  .outputTextareaH{
    margin-bottom: 10px;
  }
</style>
